<template>
  <a-layout-footer style="text-align: center">
    <p v-show="!!user.id">欢迎您,{{ user.name }}</p>
    <p>GPNU-SZ-BBS ©2021 Created by Oliver</p>
  </a-layout-footer>
</template>

<script lang="ts">
import {defineComponent, computed, onMounted} from "vue";
import store from "@/store";
import {Tool} from "@/util/tool";
import {notification} from 'ant-design-vue';


export default defineComponent({
  name: 'TheFooter',
  setup() {
    const user = computed(() => store.state.user);

    let websocket: any;
    let token: any;

    // WebSocket连接时
    const onOpen = () => {
      console.log("WebSocket连接成功，状态码为：", websocket.readyState)
    };

    // WebSocket收到消息时
    const onMessage = (event: any) => {
      console.log("WebSocket收到消息：", event.data);
      notification['info']({
        message: "收到消息",
        description: event.data,
      });
    };

    // WebSocket连接错误时
    const onError = () => {
      console.log("WebSocket连接错误，状态码为：", websocket.readyState);
    };

    // WebSocket连接关闭时
    const onClose = () => {
      console.log("WebSocket连接关闭，状态码为：", websocket.readyState);
    };

    // WebSocket初始化
    const initWebSocket = () => {
      // 连接成功
      websocket.onopen = onOpen;
      // 收到消息的回调
      websocket.onmessage = onMessage;
      // 连接错误
      websocket.onerror = onError;
      // 连接关闭的回调
      websocket.onclose = onClose;
    };

    onMounted(() => {
      if ('WebSocket' in window) {
        // 生成UUID
        token = Tool.uuid(10);
        // WebSocket为h5内置对象
        websocket = new WebSocket(process.env.VUE_APP_WS_SERVER + '/ws/' + token);
        initWebSocket()
      } else {
        alert("当前浏览器不支持websocket");
      }
    });

    return {
      user
    }
  }
})
</script>

<style scoped>

</style>